<template>
  <div  style="height: 64px; ">
    <div class='ad'>
      <i class="iconfont">&#xe633;</i>
      <p class='content'>
        <span class="text">欢迎使用校园失物招领平台，本页面为失物信息栏！ </span>
      </p>
    </div>
  </div>
  <div style="height: 2000px;background-color: transparent;position: relative;top: 20px">
    <div style="height: 300px;background-color: white;position: relative;z-index: 1;box-shadow: 2px 2px 2px grey;">
      <span style="padding-left: 44%;font-size: 20px;position: relative;top: 5%">热门失物类别</span>
      <div style="background-color: white;height: 100px;position: relative;top: 5%">
        <div class="cardList1" style="width: 80%;background-color: white;position: relative;left: 23.5%;display: flex;top: 40%">
          <div class="card" style="width: 50px;">
            <a><div style="border-radius: 1.5rem;background-color: pink;width: 50px;height: 50px"><img src="../../assets/动物.png" alt="" style="width: 41px;position: relative;left: 3px;top: 2px"></div>
              <br>
              <span style="padding-left: 10px;color: black;position: relative;top: -18px">动物</span></a></div>
          <div class="card" style="width: 50px;position: relative;left: 10%">
            <a><div style="background-color: yellowgreen;border-radius: 2rem;width: 50px;height: 50px"><img src="../../assets/口袋.png" alt="" style="width: 43px;padding-left: 8px;padding-top: 6px"></div>
              <br>
              <span style="padding-left: 15px;color: black;position: relative;top: -20px">袋</span></a></div>
          <div class="card" style="width: 50px;position: relative;left: 20%">
            <a><div style="background-color: skyblue;border-radius: 2rem;width: 50px;height: 50px"><img src="../../assets/衣服.png" alt="" style="width: 43px;padding-left: 8px;padding-top: 7px"></div>
              <br>
              <span style="padding-left: 10px;color: black;position: relative;top: -20px">服装</span></a></div>
          <div class="card" style="width: 60px;position: relative;left: 30%">
            <a><div style="background-color: coral;border-radius: 2rem;width: 50px;height: 50px"><img src="../../assets/奖杯.png" alt="" style="width: 43px;padding-left: 8px;padding-top: 7px"></div>
              <br>
              <span style="padding-left: 4px;color: black;position: relative;top: -20px">收藏品</span></a></div>
          <div class="card" style="width: 60px;position: relative;left: 40%">
            <a><div style="background-color: coral;border-radius: 2rem;width: 50px;height: 50px"><img src="../../assets/电子产品.png" alt="" style="width: 43px;padding-left: 8px;padding-top: 7px"></div>
              <br>
              <span style="color: black;position: relative;top: -20px;left: -3px">电子产品</span></a></div>
        </div>
        <div class="cardList2" style="width: 80%;background-color: white;position: relative;left: 23.5%;display: flex;top: 60%">
          <div class="card" style="width: 50px;">
            <a><div style="border-radius: 1.5rem;background-color: skyblue;width: 50px;height: 50px"><img src="../../assets/珠宝饰品.png" alt="" style="width: 40px;position: relative;left: 5px;top: 5px"></div>
              <br>
              <span style=";padding-left:10px;color: black;position: relative;top: -18px;width: 55px">饰品</span></a></div>
          <div class="card" style="width: 50px;position: relative;left: 10%">
            <a><div style="background-color: yellowgreen;border-radius: 2rem;width: 50px;height: 50px"><img src="../../assets/校园卡.png" alt="" style="width: 43px;padding-left: 8px;padding-top: 6px"></div>
              <br>
              <span style="padding-left: 6px;color: black;position: relative;top: -20px">校园卡</span></a></div>
          <div class="card" style="width: 50px;position: relative;left: 20%">
            <a><div style="background-color: skyblue;border-radius: 2rem;width: 50px;height: 50px"><img src="../../assets/其他.png" alt="" style="width: 43px;padding-left: 8px;padding-top: 7px"></div>
              <br>
              <span style="padding-left: 10px;color: black;position: relative;top: -20px">其他</span></a></div>
        </div>
      </div>
    </div>
    <div class="content1">
      <div style="width: 75%;height: 30px;padding-top: 22px;padding-left: 30px;">
        <a-input :bordered="false" v-model:value="value" placeholder="搜索招领物品名称" style="background-color: transparent;border: 0;font-size: 19px" allow-clear/>
        <a-button style="font-size:16px;position: relative;left: 963px;top:-38px;width: 200px;height: 40px;border-radius: 0.3rem;background-color: mediumpurple;color: white" @click="onSearch">搜索</a-button>
      </div>
    </div>
    <div class="content2">
      <div class="selectList" style="background-color: white;height: 150px;position: relative;top:20%;z-index: 1;">
        <div class="card-container" style="box-shadow: 2px 2px 2px grey;">
          <div style="text-align: center;font-size: 20px">
            <span style="position: relative;top: 10px">请选择物品类型</span>
          </div>
          <a-tabs v-model:activeKey="activeKey" type="card"  centered style="padding-top: 30px">
            <a-tab-pane v-for="(list , index) in selectList" :key="list.key"  :tab="list.title">
              <div style="position:relative;text-align: center">
                <template v-for="(tag, index2) in list.content" :key="tag" >
                  <a-checkable-tag
                      :checked="list.selectedTags.indexOf(tag) > -1"
                      @change="checked => handleChange(tag, checked, index2, index)"
                      style="font-size: 20px"
                  >
                    {{ tag }}
                  </a-checkable-tag>
                </template>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
      <div style="position: relative;top: 40%;width: 60%;left: 20%;z-index: 1">
        <a-list style="background-color: white" item-layout="vertical" size="large" :pagination="pagination" :data-source="cardList">
          <template #renderItem="{ item,index }">
            <a-list-item key="item.title">
              <template #actions>
                <div style="width: 100px">
                  <a-tooltip :title="dayjs(item.reportTime).format('YYYY-MM-DD HH:mm:ss')">
                    <span style="position: relative;top: 110%">{{ dayjs(item.reportTime).fromNow() }}</span>
                  </a-tooltip>
                </div>
                <span>紧急程度：&nbsp;&nbsp;<a-rate :value=item.urgent disabled style="color: red" allow-half/></span>
                <a-tag color="red" v-if="item.business !== 0" >有偿</a-tag>
                <a @click="showDrawer(index)" >了解更多</a>

              </template>
              <template #extra>
                <a-image
                  v-if="item.img!=null"
                  :width="150"
                  :src=item.img
                />
                <a-image
                  v-if="item.img===null"
                  :width="150"
                  :height="150"
                  src="https://www.antdv.com/#error"
                  fallback=""
                />
              </template>
              <a-list-item-meta>
                <template #title>
                  <a @click="showDrawer(index)" style="font-size: 20px">{{ item.lostName }}</a>
                </template>
                <template #description>
                  <a-tag v-for="tag in item.lostType">{{ tag }}</a-tag>
                </template>
              </a-list-item-meta>
              {{ item.description }}
            </a-list-item>
          </template>
        </a-list>
        <a-drawer width="640" placement="right" :visible="visible" @close="onClose">
          <div style="height: 30px"></div>
          <div style="width: 400px;position:relative;left: 16%;top: -3%">
            <a-image
                :width="400"
                :src=cardList[activeId].img
            />
          </div>
          <div style="position: relative;top: -1%">
            <a-row >
              <a-col :span="12">
                <span style="font-size: 24px;position: relative;left:90%">{{ cardList[activeId].lostName }}</span>
              </a-col>
            </a-row>
            <br>
            <a-row >
              <a-col :span="12">
                <span style="position: relative;left: 30%;font-size: 17px">失主：{{ cardList[activeId].username }}</span>
              </a-col>
              <a-col :span="12">
                <div style="margin-left: 20%; font-size: 17px">失物类型：<a-tag v-for="tag in cardList[activeId].lostType" style="">{{ tag }}</a-tag></div>
              </a-col>
            </a-row>
            <br>
            <a-row >
              <a-col :span="12">
                <span style="position: relative;left: 30%;font-size: 17px">联系电话：{{ cardList[activeId].contact }}</span>
              </a-col>
              <a-col :span="12" v-if="cardList[activeId].business !== 0">
                <span style="position: relative;left: 30%;font-size: 17px">有偿金额：{{ cardList[activeId].business }}RMB</span>
              </a-col>
            </a-row>
            <br>
            <a-row >
              <a-col :span="12">
                <span style="position: relative;left: 30%;font-size: 17px">上报时间：{{ dayjs(cardList[activeId].reportTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
              </a-col>
            </a-row>
            <br>
            <a-row >
              <a-col :span="24">
                <span style="position: relative;left: 15%;font-size: 17px">物品描述：{{ cardList[activeId].description }}</span>
              </a-col>
            </a-row>
          </div>

        </a-drawer>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, inject} from "vue";
import dayjs from "dayjs";
import relativeTime from 'dayjs/plugin/relativeTime';
import myAxios from "../../plugins/myAxios";
import {useRouter} from "vue-router";
dayjs.extend(relativeTime);

const pagination = {
  onChange: (page: number) => {
    console.log(page);
  },
  pageSize: 6,
};

const reload = inject("reload")
const activeKey = ref('animal')
const activeId = ref()
const value = ref([])
const selectList = reactive([
  {
    key: 'animal',
    title: '动物',
    content: ['猫','狗','仓鼠','鸟','动物-其他'],
    selectedTags: [] as string[],
  },{
    key: 'cloth',
    title: '服装',
    content: ['皮带&吊带','外套','背心','裙子','手套','帽子','裤子','鞋子','服装-其他'],
    selectedTags: [] as string[],
  },{
    key: 'bag',
    title: '包',
    content: ['背包','公文包','行李袋','运动包','化妆包','手提袋','包-其他'],
    selectedTags: [] as string[],
  },{
    key: 'collection',
    title: '收藏品',
    content: ['海报','硬币','漫画','纪念品','刀&剑','军事','化石','邮票','卡牌','收藏品-其他'],
    selectedTags: [] as string[],
  },{
    key: 'electron',
    title: '电子产品',
    content: ['CD&播放器','耳机','相机','手机','充电器','电脑&平板电脑','无人机&遥控','电子-其他'],
    selectedTags: [] as string[],
  },{
    key: 'Jewelry',
    title: '饰品',
    content: ['手镯','奖章&胸针','项链','耳环','手表','饰品-其他'],
    selectedTags: [] as string[],
  },{
    key: 'other',
    title: '其他',
    content: ['其他'],
    selectedTags: [] as string[],
  }
])

const visible = ref<boolean>(false);
const showDrawer = async (id:number) => {
  activeId.value = id;
  visible.value = true;
};
const onClose = () => {
  visible.value = false;
  reload()
};
const router = useRouter();
const cardList = ref([]);
const loadData = async () => {
  const res = await myAxios.get("/lost/query")
  if (res?.code === 200){
    cardList.value = res.data
    console.log(res.data)
  } else {
    alert('数据加载失败请重新登陆！')
    await router.push('/login')
  }
}

onMounted(()=>{
  loadData();
})
const cardList1 = [
  {
    id:1,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 4,
    lostType: ['钥匙','钥匙21'],
    description: '马老师你不讲武德',
    reportTime: dayjs().subtract(1, 'days'),
    business: 100,
    contact: '123456'
  },{
    id:2,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 5,
    lostType: ['钥匙','钥匙2'],
    description: '马老师你不讲武德1',
    reportTime: dayjs().subtract(2, 'days'),
    business: 0,
    contact: '123456'
  },{
    id:3,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 4.5,
    lostType: ['钥匙','钥匙21'],
    description: '马老师你不讲武德',
    reportTime: dayjs().subtract(3, 'days'),
    business: 100,
    contact: '123456'
  },{
    id:4,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 4,
    lostType: ['钥匙','钥匙21'],
    description: '马老师你不讲武德',
    reportTime: dayjs().subtract(1, 'month'),
    business: 100,
    contact: '123456'
  },{
    id:5,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 4,
    lostType: ['钥匙','钥匙21'],
    description: '马老师你不讲武德',
    reportTime: dayjs().subtract(1, 'year'),
    business: 100,
    contact: '123456'
  },{
    id:6,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 4,
    lostType: ['钥匙','钥匙21'],
    description: '马老师你不讲武德',
    reportTime: dayjs().subtract(1, 'days'),
    business: 100,
    contact: '123456'
  },{
    id:7,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 4,
    lostType: ['钥匙','钥匙21'],
    description: '马老师你不讲武德',
    reportTime: dayjs().subtract(1, 'days'),
    business: 100,
    contact: '123456'
  },{
    id:8,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 4,
    lostType: ['钥匙','钥匙21'],
    description: '马老师你不讲武德',
    reportTime: dayjs().subtract(1, 'days'),
    business: 100,
    contact: '123456'
  },{
    id:9,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 4,
    lostType: ['钥匙','钥匙21'],
    description: '马老师你不讲武德',
    reportTime: dayjs().subtract(1, 'days'),
    business: 100,
    contact: '123456'
  },{
    id:10,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 4,
    lostType: ['钥匙','钥匙21'],
    description: '马老师你不讲武德',
    reportTime: dayjs().subtract(1, 'days'),
    business: 100,
    contact: '123456'
  },{
    id:11,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 4,
    lostType: ['钥匙','钥匙21'],
    description: '马老师你不讲武德',
    reportTime: dayjs().subtract(1, 'days'),
    business: 100,
    contact: '123456'
  },{
    id:12,
    img: 'https://s1.ax1x.com/2022/07/27/vSTnWd.jpg',
    lostName: '钥匙',
    urgent: 4,
    lostType: ['钥匙','钥匙21'],
    description: '马老师你不讲武德',
    reportTime: dayjs().subtract(1, 'days'),
    business: 100,
    contact: '123456'
  },
]
const activeSearch = ref()
const handleChange = async (tag: string, checked: boolean, index2: number, index: number) => {
  const { selectedTags } = selectList[index];
  const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter(t => t !== tag);
  console.log('You are interested in: ', nextSelectedTags);
  if(selectList[index].selectedTags.length > 0 && checked){
    alert("最多只能选择一种该类型的");
  }
  else {
    selectList[index].selectedTags = nextSelectedTags;
    activeSearch.value = tag
    console.log( tag)
    const res = await myAxios.get("/pick/query", {
      params: {
        tagList: activeSearch.value
      },
    })
    if(res?.code === 200){
      cardList.value = res.data
      return
    }else {
      alert(6)
    }
  }

};
const onSearch = async () => {
  const res = await myAxios.get("/lost/query",{
    params: {
      searchText: value.value
    },
  })
  if (res?.code === 200){
    cardList.value = res.data
    console.log(res.data)
  } else {
    alert('数据加载失败请重新登陆！')
    // await router.push('/login')
  }
}

</script>
<style scoped>
.content1{
  z-index: 1;
  background-color: white;
  border-radius: 0.7rem;
  height: 80px;
  width: 80%;
  position: relative;
  top: 40px;
  left: 10%;
  box-shadow: 2px 2px 2px grey;
}
.content2{
  height: 300px;
}
.card-container p {
  margin: 0;
}
.card-container > .ant-tabs-card .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}
.card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
  padding: 16px;
  background: #fff;
}
.card-container > .ant-tabs-card > .ant-tabs-nav::before {
  display: none;
}
.card-container > .ant-tabs-card .ant-tabs-tab,
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
  background: transparent;
  border-color: transparent;
}
.card-container > .ant-tabs-card .ant-tabs-tab-active,
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
  background: #fff;
  border-color: #fff;
}
#components-tabs-demo-card-top .code-box-demo {
  padding: 24px;
  overflow: hidden;
  background: #f5f5f5;
}
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
  height: 120px;
  margin-top: -8px;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
  background: transparent;
  border-color: transparent;
}
[data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
  background: #000;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
  background: #141414;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
  background: #141414;
  border-color: #141414;
}

.ad {
  width: 30%;
  height: 50px;
  background-color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
  color: #353535;
  box-shadow: 2px 1px 8px 1px rgb(228, 232, 235);
  margin: 80px auto;
  z-index: 1
}
.content {
  flex: 1;
  overflow: hidden;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.text {
  display: block;
  width: auto;
  padding-top: 15px;
  white-space: nowrap;
  animation: marquee 15s linear infinite;
  padding-left: 105%;
  padding-right: 110%;
}
.text:hover{
  animation-play-state: paused;
}
@font-face {
  font-family: "iconfont"; /* Project id 2516453 */
  src: url("//at.alicdn.com/t/font_2516453_g6qjhhqblt9.woff2?t=1620545333370")
  format("woff2"),
  url("//at.alicdn.com/t/font_2516453_g6qjhhqblt9.woff?t=1620545333370")
  format("woff"),
  url("//at.alicdn.com/t/font_2516453_g6qjhhqblt9.ttf?t=1620545333370")
  format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  /*font-size: 16px;*/
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
i {
  color: #ff6146;
  font-size: 16px;
  margin-right: 10px;
}
</style>
